<!-- 费用科目 -->
<template>
  <div class="expense">
    <!-- 受试者 -->
    <s-table
      v-if="$auth('PROJECT.PROJECT_EXPENSE_PATIENT') || $auth('PROJECT.PROJECT_EXPENSE_RESEARCHER')"
      ref="table"
      rowKey="id"
      :columns="columns"
      bordered
      :loading="loading"
      :data="loadData"
      :scroll="{x:'max-content'}"
    >
      <!-- 表头 start -->
      <template slot="title">
        <div style="display: flex; justify-content: space-between">
          <div>
            <a-radio-group
              v-model="queryParam.type"
              default-value="1"
              button-style="solid"
              @change="handleRadio()"
            >
              <a-radio-button :value="1" v-if="$auth('PROJECT.PROJECT_EXPENSE_RESEARCHER')">{{ $t('all.autotext1096') }}</a-radio-button>
              <a-radio-button :value="2" v-if="$auth('PROJECT.PROJECT_EXPENSE_PATIENT')">{{ $t('all.autotext446') }}</a-radio-button>
            </a-radio-group>
          </div>
          <div style="display: flex;">
            <!--<a-button-->
            <!--  type="primary"-->
            <!--  icon="plus"-->
            <!--  @click="activeAdd()"-->
            <!--  :disabled="$store.state.user.project.status === 3"-->
            <!--  v-if="(queryParam.type == 1 && $auth('PROJECT.PROJECT_EXPENSE_ADD')) || (queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_ADD') )"-->
            <!--&gt;-->
            <!--  新增-->
            <!--</a-button>-->
            <!--<a-button-->
            <!--  v-if="(queryParam.type == 1 && $auth('PROJECT.PROJECT_EXPENSE_ADD')) || (queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_ADD') )"-->
            <!--  :href="$const.TEMPLATE_PATH.EXPENSE | dealImageUrl"-->
            <!--  icon="download"-->
            <!--  style="margin:0 20px"-->
            <!--  :disabled="$store.state.user.project.status === 3"-->
            <!--&gt;-->
            <!--  模板下载-->
            <!--</a-button>-->
            <!--<a-upload-->
            <!--  v-if="(queryParam.type == 1 && $auth('PROJECT.PROJECT_EXPENSE_ADD')) || (queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_ADD') )"-->
            <!--  ref="import"-->
            <!--  accept=".xlsx"-->
            <!--  name="file"-->
            <!--  list-type="picture"-->
            <!--  :before-upload="beforeUploadSite"-->
            <!--  :preview-file="clickImport"-->
            <!--&gt;-->
            <!--  <a-button type="dashed" :disabled="$store.state.user.project.status === 3"><a-icon type="upload" />导入</a-button>-->
            <!--</a-upload>-->
            <!-- epv1.5 权限调整-add:  PROJECT.PROJECT_EXPENSE_RESEARCHER_EXPORT -->
            <a-button
              style="margin-left: 20px"
              type="button"
              icon="download"
              v-if="(queryParam.type == 1 && ($auth('PROJECT.PROJECT_EXPENSE_EXPORT') || $auth('PROJECT.PROJECT_EXPENSE_RESEARCHER_EXPORT')))
                || (queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_EXPORT') )"
              @click="clickExport"
            >
              {{ $t('all.autotext1014') }}
            </a-button>
          </div>
        </div>
      </template>
      <!-- 是否默认 -->
      <span slot="status" slot-scope="text, record">
        {{ record.status | enumValueByKey($const.EXPENSE__CURRENT_STATUS) }}
      </span>
      <template slot="stages" slot-scope="text, record">
        <div style="width:120px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
          <a-tooltip v-if="record.stages" placement="topLeft">
            <template slot="title">
              <div v-for="(item, i) in record.stages.split(';')" :key="i">{{ item }}</div>
            </template>
            {{ record.stages }}
          </a-tooltip>
        </div>
      </template>
      <span slot="defaulted" slot-scope="text, record">
        <span>{{ record.defaulted === 0 ? "否" : "是" }}</span>
      </span>
      <span slot="amt" slot-scope="text, record">
        <span v-if="record.amt === 0">-</span>
        <span v-else>{{ record.amt | formatAmount }}</span>
      </span>
      <!-- 审批资料默认 -->
      <span slot="apv" slot-scope="text, record">
        {{ record.apv | enumValueByKey($const.APPROVAL_FILE) }}
      </span>
      <!-- 是否默认 end-->

      <!-- 操作区 start -->
      <!--<template slot="operation" slot-scope="text, record" v-if="$store.state.user.project.status !== 3">-->
      <!--<a-->
      <!--  @click="activeEdit(record)"-->
      <!--  v-if="(queryParam.type == 1 && $auth('PROJECT.PROJECT_EXPENSE_EDIT')) || (queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_EDIT') )"-->
      <!--&gt;编辑-->
      <!--</a>-->
      <!--<a-divider type="vertical" />-->
      <!--<a-->
      <!--  v-if="record.status !== 1 && ((queryParam.type == 1 && $auth('PROJECT.PROJECT_EXPENSE_STATUS')) || (queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_STATUS')) )"-->
      <!--  @click="switchStatus(record, 1)"-->
      <!--&gt;启用-->
      <!--</a>-->
      <!--<a-->
      <!--  @click="switchStatus(record, 0)"-->
      <!--  v-if="record.status === 1 && ( (queryParam.type == 1 && $auth('PROJECT.PROJECT_EXPENSE_STATUS')) || (queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_STATUS')) )"-->
      <!--&gt;禁用-->
      <!--</a>-->
      <!--<a-divider-->
      <!--  type="vertical"-->
      <!--  v-if="queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_STATUS') && record.defaulted == 1"-->
      <!--/>-->
      <!--<a-->
      <!--  @click="setCenter(record)"-->
      <!--  v-if="queryParam.type == 2 && $auth('PROJECT.PROJECT_EXPENSE_PATIENT_STATUS') && record.defaulted == 1"-->
      <!--&gt;中心配置-->
      <!--</a>-->
      <!--</template>-->
      <!-- 操作区 end -->
    </s-table>
    <!-- 新增弹窗 -->
    <addExpense
      v-model="visible"
      :queryParam="queryParam"
      @refresh="$refs.table.refresh(1)"
      :data="curr"
    />
    <!-- 中心配置弹窗 -->
    <setCenter :visible.sync="setVisible" :item="itemRecord" />
  </div>
</template>

<script>
import { getList, toggleStatus, expenseImport, expenseExport } from '@/api/overview/cost'
import { exportExcel } from '@/utils/util'
import { buildPaginationObj } from '@/components/Table'
import addExpense from './addExpense'
import setCenter from './setCenter'


export default {
  components: { addExpense, setCenter },
  data () {
    return {
      queryParam: {
        type: 1, // 1：研究者   2：受试者
        proId: '' // 项目Id
      },
      curr: {},
      tableData: [], // 表单数据
      visible: false, // 新增弹框标识
      confirmLoading: false,
      loading: false,
      loadData: parameter => {
        if ((this.queryParam.type === 1 && this.$auth('PROJECT.PROJECT_EXPENSE_RESEARCHER')) ||
          (this.queryParam.type === 2 && this.$auth('PROJECT.PROJECT_EXPENSE_PATIENT'))) {
          return getList(Object.assign(parameter, this.queryParam)).then(res => {
            return res
          })
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      setVisible: false,
      itemRecord: ''
    }
  },
  computed: {
    columns () {
      const columnsPM = [
        {
          title: this.$t('all.autotext334'),
          width: '100px',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: this.$t('all.autotext1278'),
          dataIndex: 'applyType'
        },
        {
          title: this.$t('all.autotext750'),
          dataIndex: 'amt',
          scopedSlots: { customRender: 'amt' }
        },
        {
          title: this.$t('all.autotext1103'),
          dataIndex: 'apv',
          scopedSlots: { customRender: 'apv' }
        },
        {
          title: this.$t('all.autotext983'),
          dataIndex: 'remark',
          width: '300px'
        },
        {
          title: this.$t('all.autotext1466'),
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }
        // {
        //   title: '操作',
        //   dataIndex: 'operation',
        //   scopedSlots: { customRender: 'operation' }
        // }
      ]
      const columnsOthers = [
        {
          title: this.$t('all.autotext334'),
          width: '100px',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: this.$t('all.autotext1278'),
          dataIndex: 'applyType'
        },
        {
          title: '是否默认金额',
          dataIndex: 'defaulted',
          scopedSlots: { customRender: 'defaulted' }
        },
        {
          title: this.$t('all.autotext750'),
          dataIndex: 'amt',
          scopedSlots: { customRender: 'amt' }
        },
        {
          title: this.$t('all.autotext1103'),
          dataIndex: 'apv',
          scopedSlots: { customRender: 'apv' }
        },
        {
          title: this.$t('all.autotext983'),
          dataIndex: 'remark',
          width: '300px'

        },
        {
          title: this.$t('all.autotext1466'),
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ]
      let res = this.$auth('PROJECT.PROJECT_EXPENSE_EDIT') || this.$auth('PROJECT.PROJECT_EXPENSE_STATUS') ? columnsPM : columnsOthers
      if (this.queryParam.type === 2) {
        res = [
          ...res.slice(0, 2),
          {
            title: this.$t('all.autotext507'),
            dataIndex: 'ptsTypeName'
          },
          ...res.slice(2, 4),
          {
            title: this.$t('all.autotext1297'),
            dataIndex: 'stages',
            scopedSlots: { customRender: 'stages' }
          },
          ...res.slice(4)
        ]
      }
      return res
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.queryParam.proId = parseInt(pd)
    }
    if (this.$auth('PROJECT.PROJECT_EXPENSE_RESEARCHER')) this.queryParam.type = 1
    else if (this.$auth('PROJECT.PROJECT_EXPENSE_PATIENT')) this.queryParam.type = 2
  },
  methods: {
    // 受试人列表
    getList (params = {}) {
      this.loading = true
      getList({ ...this.page, ...params })
        .then(res => {
          this.tableData = res.content
          this.pagination.total = res.totalCount
          this.pagination.current = res.pageNumber
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 开始新增
    activeAdd () {
      this.curr = {}
      this.visible = true
    },
    // 开始编辑
    activeEdit (record) {
      const obj = record
      delete obj.createTime // 去除掉多余字段
      delete obj.modifyTime
      this.visible = true
      this.curr = { ...record, defaulted: !!record.defaulted, apv: !!record.apv }
    },
    // 切换人员回调
    handleRadio () {
      this.loadData(this.queryParam)
      this.$refs.table.refresh(true)
    },
    // 启用禁用操作
    switchStatus (record, status) {
      // 编辑
      toggleStatus({
        id: record.id,
        applyType: record.applyType,
        amt: record.amt,
        apv: record.apv,
        defaulted: record.defaulted,
        remark: record.remark,
        type: record.type,
        ptsTypeIdDesc: record.ptsTypeName,
        visitStagesDesc: record.stages,
        status
      }).then(res => {
        this.$message.success(this.$t('all.autotext470'))
        this.$refs.table.refresh(true)
      })
    },
    beforeUploadSite (file) {
      return false
    },
    // 点击导入
    clickImport (file) {
      const params = new FormData()
      params.append('file', file)
      params.append('proId', this.queryParam.proId)
      params.append('type', this.queryParam.type)
      return expenseImport(params).then(res => {
        this.$notification.success({
          message: file.name,
          description: this.$t('all.autotext946')
        })
      }).finally(() => {
        this.$refs.import.sFileList = []
        this.$refs.table.refresh(true)
      })
    },
    // 点击导出
    clickExport () {
      const exportParams = { proId: this.queryParam.proId, type: this.queryParam.type }
      expenseExport(exportParams).then(res => {
        exportExcel(this.$t('all.autotext1507'), res)
      })
    },
    setCenter (item) {
      this.setVisible = true
      this.itemRecord = item
    }
  }
}
</script>
